<!--
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<!--
/**
 * @module Polymer Elements
 */
/**
 * g-menu is a g-selector styled to look like a menu. Use it
 * in conjunction with g-menu-item.
 *
 * Example:
 *
 *     <g-menu selected="email">
 *       <g-menu-item name="post" src="images/comment.png">Post a Comment</g-menu-item>
 *       <g-menu-item name="share" src="images/hangout.png">Share Link</g-menu-item>
 *       <g-menu-item name="email" src="images/mail.png">Email Link</g-menu-item>
 *       <g-menu-item name="favorite" src="images/favorite.png">Add to Favorites</g-menu-item>
 *     </g-menu>
 *
 * @class g-menu
 * @extends g-selector
 */
-->
<link rel="import" href="g-selector.html">
<polymer-element name="g-menu" extends="g-selector">
  <template>
    <style>
      /*@polyfill g-menu-item */
      shadow::-webkit-distributed(g-menu-item) {
        display: block;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        height: 40px;
        line-height: 35px;
        padding: 0 10px;
        margin: 10px;
        -webkit-transform: translate3d(0, 0, 0);
        border-radius: 3px;
        border: 1px solid transparent;
        font-weight: bold;
        font-size: 15px;
        cursor: pointer;
        white-space: nowrap;
        opacity: .5;
      }
      
      /* TODO(sorvell): please note, styling broken due to:
      https://code.google.com/p/chromium/issues/detail?id=229667
      */
      /*@polyfill g-menu-item.selected */
      shadow::-webkit-distributed(g-menu-item.selected) {
        background: #f2f2f2;
        border: 1px solid rgba(0, 0, 0, 0.15);
        opacity: 0.9;
      }
    </style>
    <shadow></shadow>
  </template>
  <script>
    Polymer('g-menu');
  </script>
</polymer-element>
